<template>
	<view>
		<view class="bartop"></view>
		<view class="cu-bar">
			<view class="action">
				<text class="cuIcon-back text-gray" @tap="goBack"></text> 返回
			</view>
			<view class="text-lg text-bold">
				报表填报管理
			</view>
			<view class="action">
				<text class="text-lg" style="color: #13227a;" @tap="submit()">完成</text>
			</view>
		</view>
		<form ref="form">
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>班次</view>
				<picker @change="ClassesChange" :value="classes.newindex" :name="classes.key" :range="classes.types"
					:data-current="classes.newindex" range-key="name">
					<view v-if="classes.newindex == -1" class="picker">
						请选择班次
					</view>
					<view v-else class="picker">
						{{classes.types[classes.newindex].name}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>订单号</view>
				<input class="text-right" placeholder="请输入订单号" name="order_id" v-model="orderId"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>产品名称</view>
				<song-data-picker style="width: 75%; display: flex; justify-content: flex-end; overflow: auto;"
					:localdata="product.types" popup-title="请选择产品" :openSearch="true" :border="false"
					v-model="product.newindex">
				</song-data-picker>

				<!-- <uni-data-picker v-model="product.newindex" :localdata="product.types" :border="false"
					:clear-icon="false" popup-title="请选择产品" @change="ProductIdChange">
				</uni-data-picker> -->
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>机台编号</view>
				<picker @change="NumberChange" :name="machineNumber.key" :value="machineNumber.newindex"
					:range="machineNumber.types" range-key="name">
					<view class="picker">
						{{ machineNumber.types[machineNumber.newindex].name}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>用料</view>
				<picker @change="MaterialIdChange" :name="material.key" :value="material.newindex"
					:range="material.types" range-key="name">
					<view class="picker">
						{{ material.types[material.newindex].name }}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>颜色/色粉</view>
				<picker @change="ColourIdChange" :name="colour.key" :value="colour.newindex" :range="colour.types"
					range-key="name">
					<view class="picker">
						{{ colour.types[colour.newindex].name }}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>排产数量</view>
				<input name="order_number" type="number" placeholder="请输入排产数量" v-model="orderNumber"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>生产合格总数</view>
				<input name="qualified_quantity" type="number" placeholder="生产合格总数" v-model="qualifiedQuantity"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>实际生产工时</view>
				<input name="working_hours" type="digit" placeholder="实际生产工时" v-model="workingHours"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>残品数量</view>
				<input name="scrapped_part" type="number" placeholder="残品数量" v-model="scrappedPart"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>操作工</view>
				<picker v-if="operator.types" @change="OperatorChange" :name="operator.key" :value="operator.newindex"
					:range="operator.types" range-key="trueName">
					<view v-if="operator.types" class="picker">
						{{ operator.types[operator.newindex].trueName }}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>产品单重</view>
				<input placeholder="请输入产品单重" name="weight" v-model="weight"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">换模调试时间</view>
				<input placeholder="请输入换模调试时间" type="number" name="debugging_time" v-model="debuggingTime"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">换料烘料时间</view>
				<input placeholder="请输入换料烘料时间" type="number" name="change_material_time"
					v-model="changeMaterialTime"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">其他异常时间</view>
				<input placeholder="请输入其他异常时间" name="abnormal_time" v-model="abnormalTime"></input>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">备注</view>
				<textarea maxlength="-1" @input="textareaInput" placeholder="请输入备注" v-model="remarks"></textarea>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		operator
	} from '../../common/httpApi'
	export default {
		data() {
			return {
				index: -1,
				classes: {
					name: '班次',
					newindex: 0,
					key: 'classes',
					types: [{
						id: 1,
						name: '白班'
					}, {
						id: 2,
						name: '晚班'
					}]
				},
				product: {
					newindex: -1,
					key: 'productId',
					name: '产品名称',
					types: this.$cache.get("products")
				},
				machineNumber: {
					newindex: 0,
					key: 'number',
					name: '机台编号',
					types: this.$cache.get("machineNumbers")
				},
				material: {
					newindex: 0,
					key: 'materialId',
					name: '用料',
					types: this.$cache.get("materials")
				},
				colour: {
					newindex: 0,
					key: 'colourId',
					name: '颜色/用料',
					types: this.$cache.get("colour")
				},
				operator: {
					newindex: 0,
					key: 'operator',
					name: '操作工',
					types: null
				},
				id: null,
				orderId: null, //订单号
				orderNumber: null, //排产数量
				qualifiedQuantity: null, //生产合格数量
				workingHours: null, //实际生产工时
				scrappedPart: null, //残品数量
				weight: null, //产品单重
				debuggingTime: null, //换模调试时间
				changeMaterialTime: null, // 换料烘料时间
				abnormalTime: null, //其他异常事件
				remarks: null,
				groupId: null
			}
		},
		onLoad(options) {
			if (options.data) {
				let data = JSON.parse(options.data)
				console.log(data)
				this.id = data.id
				this.classes.newindex = data.classes == 1 ? 0 : 1
				this.orderId = data.orderId
				let colours = this.$cache.get("colour")
				for (let i = 0; i < colours.length; i++) {
					const item = [i];
					if (item.id == data.colourId) {
						this.colour.newindex = i;
					};
				}

				let materials = this.$cache.get("materials")
				for (let i = 0; i < materials.length; i++) {
					const item = [i];
					if (item.id == data.materialId) {
						this.material.newindex = i;
					};
				}
				let machineNumbers = this.$cache.get("machineNumbers")
				for (let i = 0; i < machineNumbers.length; i++) {
					const item = [i];
					if (item.id == data.number) {
						this.machineNumber.newindex = i;
					};
				}
				this.product.newindex = data.productId
				this.unit = data.unit
				this.orderNumber = data.orderNumber
				this.qualifiedQuantity = data.qualifiedQuantity
				this.workingHours = data.workingHours
				this.scrappedPart = data.scrappedPart
				this.accumulateNumber = data.accumulateNumber
				this.debuggingTime = data.debuggingTime
				this.changeMaterialTime = data.changeMaterialTime
				this.weight = data.weight
				this.abnormalTime = data.abnormalTime
				this.remarks = data.remarks
				this.groupId = data.groupid
			}
			this.getOperator()


		},
		methods: {
			ClassesChange(e) {
				this.classes.newindex = e.detail.value
			},
			ProductIdChange(e) {
				// this.product.newindex = e.detail.value
				console.log(e.detail.value)
			},
			mySearchFn(searchList, searchWord) {
				return searchList.filter(x => x.searchText.includes(searchWord));
			},
			NumberChange(e) {
				this.machineNumber.newindex = e.detail.value
			},
			MaterialIdChange(e) {
				this.material.newindex = e.detail.value
			},
			ColourIdChange(e) {
				this.colour.newindex = e.detail.value
			},
			OperatorChange(e) {
				this.operator.newindex = e.detail.value
			},
			textareaInput(e) {
				this.remarks = e.detail.value
			},
			submit() {
				// console.log(this.operator.newindex)

				if (this.validateData()) return

				let productId = 0
				if (this.product.newindex.length !== -1) {
					productId = this.product.newindex
				} else {
					uni.showToast({
						title: "请选择产品名称",
						icon: 'none',
						mask: true
					})
					return
				}
				let groupId = this.groupId
				if (groupId == null) {
					groupId = this.$cache.get("groupId")
				}
				let number = this.$cache.get("machineNumbers")[this.machineNumber.newindex].id
				let materialId = this.$cache.get("materials")[this.material.newindex].id
				let colourId = this.$cache.get("colour")[this.colour.newindex].id
				let operator = this.operator.types[this.operator.newindex].userId
				let classes = this.classes.types[this.classes.newindex].id
				let scdate = Math.round(new Date() / 1000)
				let param = {
					"orderId": this.orderId,
					"productId": productId,
					"groupId": groupId,
					"number": number,
					"materialId": materialId,
					"colourId": colourId,
					"orderNumber": this.orderNumber,
					"qualifiedQuantity": this.qualifiedQuantity,
					"workingHours": this.workingHours,
					"scrappedPart": this.scrappedPart,
					"operator": operator,
					"accumulateNumber": this.accumulateNumber,
					"debuggingTime": this.debuggingTime,
					"changeMaterialTime": this.changeMaterialTime,
					"weight": this.weight,
					"classes": classes,
					"abnormalTime": this.abnormalTime,
					"remarks": this.remarks,
					"scdate": scdate
				}
				if (this.id) {
					param.id = this.id
				};
				this.$Request.post(this.$httpApi.form.add, param).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: '2|success,none|',
							mask: true
						})

						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			validateData() {
				let errorCode = ""
				if (!this.orderId) {
					errorCode = "请输入订单号"
				} else if (!this.orderNumber) {
					errorCode = "请输入排产数量"
				} else if (!this.qualifiedQuantity) {
					errorCode = "请输入生产合格数量"
				} else if (!this.workingHours) {
					errorCode = "请输入实际生产工时"
				} else if (!this.scrappedPart) {
					errorCode = "请输入残品数量"
				} else if (!this.weight) {
					errorCode = "请输入产品单重"
				}
				if (errorCode != "") {
					uni.showToast({
						title: errorCode,
						icon: 'none',
						duration: 2000
					});
					return true
				}
				return false

			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getOperator() {
				let groupId = this.groupId
				console.log(groupId)
				if (groupId == null) {
					groupId = this.$cache.get("groupId")
				}

				this.$Request.post(this.$httpApi.operator.operatorList + "?groupId=" +
					groupId).then(res => {
					if (res.code == 200) {
						this.operator.types = res.data
					}
				})
			}
		},

	}
</script>

<style>
	.cu-list.menu>.cu-item {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.selected-area {
		justify-content: flex-end;
	}

	input {
		text-align: right;
	}
</style>